<template>
  <div class="full-class-rate">
    <multiple-toolbar
      ref="toolbar"
      class="head"
      @search="getFullClassRate(true)"
      @export="handleExport"
      @setting="handlSet"
      areaTeam
      busTeam
      allperiod
      hasExport
      hasSet
      needAllPeriod
    ></multiple-toolbar>
    <div class="am-u-sm-12 am-form-group">
      <el-button
        size="small"
        type="success"
        @click="goSettingFilter"
        v-if="hasPermission('reportSetting')"
      >设置</el-button>
    </div>
    <el-table
      :data="tableData"
      empty-text="暂无数据"
      :showSummary="true"
      :summaryMethod="summary"
      maxHeight="600"
      border
      stripe
      style="min-width: 100%"
    >
      <el-table-column
        prop="busTeamName"
        min-width="150"
        label="业务组"
      >
      </el-table-column>
      <el-table-column
        prop="periodName"
        label="期数"
      >
      </el-table-column>
      <el-table-column
        prop="gradeName"
        label="年级"
      >
      </el-table-column>
      <el-table-column
        prop="totalQuota"
        label="总学位"
      >
      </el-table-column>
      <el-table-column
        prop="totalEffectiveRegAmount"
        min-width="120"
        label="有效报名数"
      >
      </el-table-column>
      <el-table-column label="满班率">
        <template scope="scope">
          <div>
            {{Number(scope.row.totalEffectiveRegAmount)/Number(scope.row.totalQuota)*100 | formatNumber(2)}}%
          </div>
        </template>
      </el-table-column>
      <el-table-column
        prop="targetFullClassRate"
        min-width="100"
        label="目标满班率"
      >
      </el-table-column>
      <el-table-column label="操作">
        <template scope="scope">
          <el-button
            v-if="scope.row.classFullRateList"
            size="small"
            @click="handleDetail(scope.row.classFullRateList)"
          >查看明细</el-button>
        </template>
      </el-table-column>
    </el-table>
    <full-class-rate-detail ref="classFullRateDetail"></full-class-rate-detail>
    <full-class-rate-set
      ref="classFullRateSte"
      @getFullClassRate="getFullClassRate()"
    ></full-class-rate-set>
    <countFilterModal
      ref="filterModal"
      :resourceId="4"
    ></countFilterModal>
  </div>
</template>
<script>
import io from '../../lib/io'
import moment from 'moment'
import FullClassRateDetail from './FullClassRateDetail.vue'
import MultipleToolbar from '../operating/MultipleToolbar.vue'
import FullClassRateSet from './FullClassRateSet.vue'
import util from '../../lib/util'
import countFilterModal from '../potentialcustomer/countFilterModal.vue'

export default {
  components: {
    MultipleToolbar,
    FullClassRateDetail,
    FullClassRateSet,
    countFilterModal
  },
  data: function() {
    return {
      tableData: [],
      firstLoad: true
    }
  },
  created: function() {},
  computed: {
    areaTeams: function() {
      return this.$root.config.areaTeams || []
    }
  },
  methods: {
    goSettingFilter() {
      this.$refs.filterModal.show()
    },
    handleDetail(classFullRateList) {
      this.$refs.classFullRateDetail.show()
      this.$refs.classFullRateDetail.tableData = classFullRateList || []
    },
    handleExport() {
      io.downloadFile(
        io.exportBusTeamFullClassRate,
        this.formatData(),
        function(ret) {}
      )
    },
    handlSet() {
      this.$refs.classFullRateSte.areaTeamName = this.areaTeams.filter(item => {
        return item.areaTeamId == this.$refs.toolbar.formData.areaTeamId
      })[0].name
      this.$refs.classFullRateSte.areaTeamId = this.$refs.toolbar.formData.areaTeamId
      this.$refs.classFullRateSte.init()
      this.$refs.classFullRateSte.show()
    },
    getFullClassRate: function(init) {
      var _this = this
      _this.$showLoading()
      io.post(io.fullClassRate, this.formatData(init), function(ret) {
        if (ret.success) {
          _this.$hiddenLoading()
          _this.groupingData(ret.data)
        } else {
          _this.$alert(ret.desc)
        }
      })
    },
    summary() {
      let sum = []
      if (this.sum) {
        sum[0] = '总计'
        sum[1] = ''
        sum[2] = ''
        sum[3] = this.sum.totalQuota
        sum[4] = this.sum.totalEffectiveRegAmount
        sum[5] =
          this.$options.filters.formatNumber(
            (this.sum.totalEffectiveRegAmount / this.sum.totalQuota) * 100,
            2
          ) + '%'
        sum[6] = ''
      }
      return sum
    },
    groupingData(data) {
      let obj = {},
        tableData = [],
        sumObj = {
          busTeamName: '总计',
          totalQuota: 0,
          totalEffectiveRegAmount: 0
        }
      data.map(val => {
        sumObj.totalQuota += Number(val.totalQuota)
        sumObj.totalEffectiveRegAmount += Number(val.totalEffectiveRegAmount)
      })
      sumObj.totalQuota = sumObj.totalQuota
      sumObj.totalEffectiveRegAmount = sumObj.totalEffectiveRegAmount
      this.sum = sumObj
      for (let i = 0; i < data.length; i++) {
        if (!obj[data[i].busTeamId + data[i].periodId]) {
          obj[data[i].busTeamId + data[i].periodId] = [data[i]]
        } else {
          obj[data[i].busTeamId + data[i].periodId].push(data[i])
        }
      }
      Object.keys(obj).map(key => {
        let sum = {
          busTeamName: '小计',
          totalQuota: 0,
          totalEffectiveRegAmount: 0
        }
        obj[key].map(val => {
          sum.totalQuota += Number(val.totalQuota)
          sum.totalEffectiveRegAmount += Number(val.totalEffectiveRegAmount)
        })
        sum.totalQuota = sum.totalQuota
        sum.totalEffectiveRegAmount = sum.totalEffectiveRegAmount
        obj[key].push(sum)
        tableData = tableData.concat(obj[key])
      })
      this.tableData = tableData
    },
    formatData(init) {
      let toolbar = this.$refs.toolbar

      let busTeamIds = [],
        periodIds = []

      if (toolbar.formData.busTeamIds.length === 0) {
        toolbar.busTeams.map(val => {
          busTeamIds.push(val.busTeamId)
        })
      } else {
        busTeamIds = toolbar.formData.busTeamIds
      }
      if (toolbar.formData.periodIds.length === 0) {
        toolbar.periods.map(val => {
          periodIds.push(val.periodId)
        })
      } else {
        periodIds = toolbar.formData.periodIds
      }

      let formData = {
        areaTeamId: toolbar.formData.areaTeamId,
        busTeamIds: busTeamIds.join(','),
        periodIds: periodIds.join(',')
      }

      if (
        this.firstLoad ||
        util.searchHashParam({}).year ==
          moment(toolbar.formData.year).format('YYYY')
      ) {
        this.firstLoad = false
        // console.log(formData.periodIds)
        formData = util.searchHashParam(formData)
        // formData.periodIds = formData.periodIds.join(',');
        // formData.gradeIds = formData.gradeIds.join(',');
        delete formData.year
      }
      return formData
    }
  }
}
</script>
<style lang="less">
.full-class-rate {
  .head {
    padding: 0;
    margin-left: -10px;
  }
}
</style>
